[V0_FILE]typescriptreact:file="app/page.tsx" import { MainMenu } from "@/components/main-menu" export default function Home() { return (

Block Line

) } [V0_FILE]typescriptreact:file="components/block-line-game.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Trophy, RotateCcw, Volume2, VolumeX, Coins, ShoppingBag } from "lucide-react" import GameBoard from "./game-board" import ScorePanel from "./score-panel" import ShopModal from "./shop-modal" // Cores disponíveis para os blocos const COLORS = ["#FF5252", "#4CAF50", "#2196F3", "#FFC107", "#9C27B0"] // Taxa de conversão de pontos para moedas const POINTS_TO_MONEY_RATE = 0.1 // 10% dos pontos são convertidos em moedas // Definição dos backgrounds e seus preços const BACKGROUNDS = [ { id: "default", name: "Padrão", price: 0 }, { id: "space", name: "Espaço", price: 500 }, { id: "beach", name: "Praia", price: 1000 }, { id: "forest", name: "Floresta", price: 1500 }, ] interface BlockLineGameProps { difficulty?: number soundEnabled?: boolean } export default function BlockLineGame({ difficulty = 1, soundEnabled = true }: BlockLineGameProps) { // Dimensões do tabuleiro const ROWS = 9 const COLS = 8 // Estado do jogo const [board, setBoard] = useState([]) const [score, setScore] = useState(0) const [highScore, setHighScore] = useState(0) const [gameOver, setGameOver] = useState(false) const [isPaused, setIsPaused] = useState(false) const [isSoundEnabled, setIsSoundEnabled] = useState(soundEnabled) // Estado da loja const [money, setMoney] = useState(0) const [unlockedBackgrounds, setUnlockedBackgrounds] = useState(["default"]) const [currentBackground, setCurrentBackground] = useState("default") const [isShopOpen, setIsShopOpen] = useState(false) // Criar um novo tabuleiro aleatório const createBoard = useCallback(() => { const newBoard: string[][] = [] for (let i = 0; i < ROWS; i++) { const row: string[] = [] for (let j = 0; j < COLS; j++) { row.push(COLORS[Math.floor(Math.random() * COLORS.length)]) } newBoard.push(row) } return newBoard }, []) // Encontrar blocos conectados da mesma cor const findConnectedBlocks = useCallback( (row: number, col: number, color: string, visited: Set = new Set()) => { const key = `${row},${col}` if (row < 0 || row >= ROWS || col < 0 || col >= COLS || board[row][col] !== color || visited.has(key)) { return [] } visited.add(key) const connected = [[row, col]] // Verificar blocos adjacentes (cima, baixo, esquerda, direita) const directions = [ [-1, 0], [1, 0], [0, -1], [0, 1], ] for (const [dx, dy] of directions) { const newConnected = findConnectedBlocks(row + dx, col + dy, color, visited) connected.push(...newConnected) } return connected }, [board], ) // Aplicar gravidade aos blocos const applyGravity = useCallback((currentBoard: string[][]) => { const newBoard = [...currentBoard] // Para cada coluna for (let col = 0; col < COLS; col++) { let emptyRow = -1 // De baixo para cima for (let row = ROWS - 1; row >= 0; row--) { if (newBoard[row][col] === "") { if (emptyRow === -1) emptyRow = row } else if (emptyRow !== -1) { // Mover o bloco para a posição vazia newBoard[emptyRow][col] = newBoard[row][col] newBoard[row][col] = "" emptyRow-- row = emptyRow + 1 // Verificar a mesma posição novamente } } } return newBoard }, []) // Preencher espaços vazios com novos blocos const fillEmptySpaces = useCallback((currentBoard: string[][]) => { const newBoard = [...currentBoard] for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { if (newBoard[row][col] === "") { newBoard[row][col] = COLORS[Math.floor(Math.random() * COLORS.length)] } } } return newBoard }, []) // Verificar se existem movimentos possíveis const hasValidMoves = useCallback(() => { for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { const color = board[row][col] const connected = findConnectedBlocks(row, col, color) if (connected.length >= 2) { return true } } } return false }, [board, findConnectedBlocks]) // Carregar dados salvos useEffect(() => { const savedHighScore = localStorage.getItem("blockLineHighScore") const savedMoney = localStorage.getItem("blockLineMoney") const savedUnlockedBackgrounds = localStorage.getItem("blockLineUnlockedBackgrounds") const savedCurrentBackground = localStorage.getItem("blockLineCurrentBackground") if (savedHighScore) setHighScore(Number.parseInt(savedHighScore)) if (savedMoney) setMoney(Number.parseInt(savedMoney)) if (savedUnlockedBackgrounds) setUnlockedBackgrounds(JSON.parse(savedUnlockedBackgrounds)) if (savedCurrentBackground) setCurrentBackground(savedCurrentBackground) startNewGame() }, []) // Salvar dados useEffect(() => { localStorage.setItem("blockLineHighScore", highScore.toString()) localStorage.setItem("blockLineMoney", money.toString()) localStorage.setItem("blockLineUnlockedBackgrounds", JSON.stringify(unlockedBackgrounds)) localStorage.setItem("blockLineCurrentBackground", currentBackground) }, [highScore, money, unlockedBackgrounds, currentBackground]) // Verificar fim de jogo quando o tabuleiro mudar useEffect(() => { if (board.length && !hasValidMoves()) { setGameOver(true) if (isSoundEnabled) { playSound("gameover") } // Converter pontos em moedas ao fim do jogo const earnedMoney = Math.floor(score * POINTS_TO_MONEY_RATE) setMoney((prev) => prev + earnedMoney) } }, [board, hasValidMoves, isSoundEnabled, score]) // Iniciar novo jogo const startNewGame = () => { const newBoard = createBoard() setBoard(newBoard) setScore(0) setGameOver(false) setIsPaused(false) } // Reproduzir sons const playSound = useCallback((type: "pop" | "line" | "gameover") => { try { const audio = new Audio(`/${type}.mp3`) audio.volume = 0.3 audio.play() } catch (error) { console.error("Erro ao reproduzir som:", error) } }, []) // Manipular clique em um bloco const handleBlockClick = useCallback( (row: number, col: number) => { if (gameOver || isPaused) return const color = board[row][col] const connectedBlocks = findConnectedBlocks(row, col, color) // Só remove se houver 2 ou mais blocos conectados if (connectedBlocks.length >= 2) { // Criar nova cópia do tabuleiro let newBoard = board.map((row) => [...row]) // Remover blocos conectados for (const [r, c] of connectedBlocks) { newBoard[r][c] = "" } // Aplicar gravidade newBoard = applyGravity(newBoard) // Preencher espaços vazios newBoard = fillEmptySpaces(newBoard) // Atualizar tabuleiro setBoard(newBoard) // Calcular pontuação (blocos² * 10) const points = connectedBlocks.length * connectedBlocks.length * 10 const newScore = score + points setScore(newScore) if (newScore > highScore) { setHighScore(newScore) } // Reproduzir som if (isSoundEnabled) { playSound(connectedBlocks.length >= 4 ? "line" : "pop") } } }, [ board, gameOver, isPaused, score, highScore, findConnectedBlocks, applyGravity, fillEmptySpaces, isSoundEnabled, playSound, ], ) // Manipular compra de fundo const handleBuyBackground = (backgroundId: string) => { if (!unlockedBackgrounds.includes(backgroundId)) { const background = BACKGROUNDS.find((bg) => bg.id === backgroundId) if (background && money >= background.price) { setMoney((prev) => prev - background.price) setUnlockedBackgrounds((prev) => [...prev, backgroundId]) if (isSoundEnabled) { playSound("line") // Som de compra } } } } return (

{money}

{gameOver && (

Fim de jogo! Sua pontuação: {score}

Moedas ganhas: {Math.floor(score * POINTS_TO_MONEY_RATE)}

)} {isPaused && !gameOver && (

Jogo Pausado

)}

Clique em grupos de 2 ou mais blocos da mesma cor para removê-los

setIsShopOpen(false)} money={money} unlockedBackgrounds={unlockedBackgrounds} currentBackground={currentBackground} onBuyBackground={handleBuyBackground} onSelectBackground={setCurrentBackground} />

) } [V0_FILE]typescriptreact:file="components/score-panel.tsx" import { Card } from "@/components/ui/card" interface ScorePanelProps { score: number highScore: number } export default function ScorePanel({ score, highScore }: ScorePanelProps) { return (

Pontuação

{score}

Recorde

{highScore}

) } [V0_FILE]typescriptreact:file="components/help-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronLeft, ChevronRight, Mouse, Target, Zap, Trophy, Timer, Crown } from "lucide-react" interface HelpModalProps { open: boolean onClose: () => void } const TUTORIAL_STEPS = [ { title: "Como Jogar", description: "Aprenda as mecânicas básicas do Block Line", content: (

{Array.from({ length: 16 }).map((_, i) => ( ))}

Clique nos Blocos

• Encontre grupos de 2 ou mais blocos da mesma cor conectados
• Clique em qualquer bloco do grupo para removê-los
• Os blocos acima cairão para preencher os espaços vazios

), }, { title: "Pontuação", description: "Entenda como ganhar mais pontos", content: (

{Array.from({ length: 4 }).map((_, i) => (

))}

40 pontos

(4 blocos)²×10

{Array.from({ length: 9 }).map((_, i) => (

))}

810 pontos

(9 blocos)²×10

Sistema de Pontuação

• A pontuação é calculada como: (número de blocos)² × 10
• Quanto mais blocos removidos de uma vez, mais pontos você ganha
• Faça combos removendo vários grupos em sequência

), }, { title: "Modos de Jogo", description: "Conheça os diferentes modos disponíveis", content: (

Modo Clássico

• Jogue sem limites
• Perfeito para iniciantes
• Desbloqueado desde o início

Contra o Tempo

• 2 minutos por partida
• Pontuação multiplicada
• Desbloqueado desde o início

Modo Desafio

• Níveis progressivos
• Objetivos específicos
• Requer Nível 5

Modo Zen

• Sem pressão de tempo
• Música relaxante
• Requer Nível 3

), }, { title: "Dicas e Estratégias", description: "Aprenda a melhorar sua pontuação", content: (

Planejamento

Analise o tabuleiro antes de fazer sua jogada. Procure grupos maiores para maximizar pontos.

Combos

Tente criar reações em cadeia. Remova blocos que farão outros grupos se formarem.

Dicas Avançadas

Priorize grupos grandes

Um grupo de 6 blocos vale mais que três grupos de 2 blocos
Observe o padrão de queda

Preveja como os blocos cairão após uma jogada
Mantenha opções abertas

Não remova grupos pequenos se puderem se juntar a outros depois

), }, ] export default function HelpModal({ open, onClose }: HelpModalProps) { const [currentStep, setCurrentStep] = useState(0) const step = TUTORIAL_STEPS[currentStep] const nextStep = () => { if (currentStep < TUTORIAL_STEPS.length - 1) { setCurrentStep(currentStep + 1) } } const prevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Block Line - Jogo de Quebra-Cabeça", description: "Um jogo divertido onde você remove blocos conectados da mesma cor", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } body { background-color: #f5f5f5; color: #333; } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Fechar )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/main-menu.tsx" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Play, Trophy, Settings, Volume2, Timer, Zap, Medal, Crown, HelpCircle, Palette, BarChart3 } from "lucide-react" import BlockLineGame from "./block-line-game" import HelpModal from "./help-modal" import AchievementsModal from "./achievements-modal" import StatsModal from "./stats-modal" // Modos de jogo disponíveis const GAME_MODES = [ { id: "classic", name: "Modo Clássico", description: "O jogo original Block Line", icon: Play, color: "from-blue-500 to-blue-600", unlocked: true, }, { id: "timed", name: "Contra o Tempo", description: "Complete o objetivo antes do tempo acabar", icon: Timer, color: "from-orange-500 to-orange-600", unlocked: true, }, { id: "challenge", name: "Modo Desafio", description: "Níveis progressivos com dificuldade crescente", icon: Zap, color: "from-purple-500 to-purple-600", requiresLevel: 5, }, ] interface MainMenuProps { onStartGame?: (mode: string) => void } export function MainMenu({ onStartGame }: MainMenuProps) { const [activeTab, setActiveTab] = useState("play") const [gameStarted, setGameStarted] = useState(false) const [selectedMode, setSelectedMode] = useState("") const [showHelp, setShowHelp] = useState(false) const [showAchievements, setShowAchievements] = useState(false) const [showStats, setShowStats] = useState(false) // Estados do jogador const [playerLevel, setPlayerLevel] = useState(1) const [playerXp, setPlayerXp] = useState(0) const [soundEnabled, setSoundEnabled] = useState(true) const [musicEnabled, setMusicEnabled] = useState(true) const [difficulty, setDifficulty] = useState(2) const [colorBlindMode, setColorBlindMode] = useState(false) // Carregar dados salvos useEffect(() => { const savedLevel = localStorage.getItem("blockLineLevel") const savedXp = localStorage.getItem("blockLineXp") if (savedLevel) setPlayerLevel(Number.parseInt(savedLevel)) if (savedXp) setPlayerXp(Number.parseInt(savedXp)) }, []) // Iniciar jogo const handleStartGame = (mode: string) => { setSelectedMode(mode) setGameStarted(true) if (onStartGame) onStartGame(mode) } if (gameStarted) { return (

) } return ( <> Block Line
Nível {playerLevel}
Jogar Status Opções
{GAME_MODES.map((mode) => { const isLocked = mode.requiresLevel && playerLevel < mode.requiresLevel return ( ) })}

Conquistas

Desbloqueadas 12/30

Estatísticas

Jogos 142

Maior Combo 8x

Tempo Total 12h

Som

Efeitos Sonoros

Música de Fundo

Jogabilidade

Dificuldade {difficulty}
setDifficulty(value[0])} className="w-full" />

Modo Daltônico

setShowHelp(false)} /> setShowAchievements(false)} /> setShowStats(false)} /> ) } [V0_FILE]typescriptreact:file="components/next-block-preview.tsx" interface NextBlockPreviewProps { block: number[][] color: string } export default function NextBlockPreview({ block, color }: NextBlockPreviewProps) { if (!block.length) return null // Determinar as dimensões do preview const rows = block.length const cols = block[0].length return (

Próximo

{block.map((row, rowIndex) => row.map((cell, colIndex) => (
)), )}

) } [V0_FILE]typescriptreact:file="components/high-scores.tsx" "use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import { Trophy } from "lucide-react" interface HighScore { name: string score: number date: string } export default function HighScores() { const [scores, setScores] = useState([]) useEffect(() => { // Em um jogo real, isso poderia vir de uma API // Por enquanto, usamos dados de exemplo ou do localStorage const savedHighScore = localStorage.getItem("blockLineHighScore") const demoScores: HighScore[] = [ { name: "Jogador 1", score: savedHighScore ? Number.parseInt(savedHighScore) : 5000, date: new Date().toLocaleDateString(), }, { name: "Jogador 2", score: 4500, date: "01/03/2025" }, { name: "Jogador 3", score: 3800, date: "28/02/2025" }, { name: "Jogador 4", score: 3200, date: "25/02/2025" }, { name: "Jogador 5", score: 2700, date: "20/02/2025" }, ] setScores(demoScores) }, []) return (

Melhores Pontuações

{scores.map((score, index) => (

{index === 0 ? : index + 1}

{score.name}

{score.date}

{score.score}
))}

) } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/shop-modal.tsx" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Coins, Lock, Check } from "lucide-react" interface Background { id: string name: string price: number colors: { board: string cell: string } } const BACKGROUNDS: Background[] = [ { id: "default", name: "Padrão", price: 0, colors: { board: "bg-gray-800", cell: "bg-gray-900", }, }, { id: "ocean", name: "Oceano", price: 1000, colors: { board: "bg-blue-900", cell: "bg-blue-950", }, }, { id: "forest", name: "Floresta", price: 2000, colors: { board: "bg-green-900", cell: "bg-green-950", }, }, { id: "volcano", name: "Vulcão", price: 3000, colors: { board: "bg-red-900", cell: "bg-red-950", }, }, { id: "galaxy", name: "Galáxia", price: 5000, colors: { board: "bg-purple-900", cell: "bg-purple-950", }, }, ] interface ShopModalProps { open: boolean onClose: () => void money: number unlockedBackgrounds: string[] currentBackground: string onBuyBackground: (backgroundId: string) => void onSelectBackground: (backgroundId: string) => void } export default function ShopModal({ open, onClose, money, unlockedBackgrounds, currentBackground, onBuyBackground, onSelectBackground, }: ShopModalProps) { const [selectedBackground, setSelectedBackground] = useState(currentBackground) const handleSelect = (background: Background) => { setSelectedBackground(background.id) onSelectBackground(background.id) } const handleBuy = (background: Background) => { if (money >= background.price) { onBuyBackground(background.id) handleSelect(background) } } return ( Loja de Temas Use suas moedas para comprar novos temas para o jogo

{money}

{BACKGROUNDS.map((background) => { const isUnlocked = unlockedBackgrounds.includes(background.id) const isSelected = selectedBackground === background.id const canBuy = money >= background.price return (

{background.name}
{background.price > 0 && (
{background.price}
)}

{isUnlocked ? ( ) : ( )}
) })}

) } [V0_FILE]typescriptreact:file="components/achievements-modal.tsx" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Trophy, Star, Zap, Target, Crown, Medal } from "lucide-react" const ACHIEVEMENTS = [ { id: "beginner", name: "Iniciante", description: "Complete 10 jogos", icon: Trophy, progress: 80, color: "text-yellow-600 bg-yellow-100", }, { id: "combo", name: "Combo Master", description: "Faça um combo de 5x", icon: Zap, progress: 60, color: "text-blue-600 bg-blue-100", }, { id: "score", name: "Alta Pontuação", description: "Marque 10.000 pontos", icon: Target, progress: 45, color: "text-green-600 bg-green-100", }, { id: "expert", name: "Especialista", description: "Alcance o nível 10", icon: Crown, progress: 30, color: "text-purple-600 bg-purple-100", }, { id: "collector", name: "Colecionador", description: "Desbloqueie todos os temas", icon: Medal, progress: 20, color: "text-red-600 bg-red-100", }, ] interface AchievementsModalProps { open: boolean onClose: () => void } export default function AchievementsModal({ open, onClose }: AchievementsModalProps) { return ( Conquistas
Progresso Total
12/30

{ACHIEVEMENTS.map((achievement) => (

{achievement.name}

{achievement.description}

{achievement.progress}%
))}
) } [V0_FILE]typescriptreact:file="components/stats-modal.tsx" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card } from "@/components/ui/card" import { BarChart3, Trophy, Clock, Target, Zap, Gamepad2, Timer } from "lucide-react" interface StatsModalProps { open: boolean onClose: () => void } export default function StatsModal({ open, onClose }: StatsModalProps) { return ( Estatísticas

Jogos 142

Vitórias 98

Recordes

Maior Pontuação
24,850

Maior Combo
8x

Melhor Tempo
2:45

Totais

Blocos Removidos
4,387

Tempo Jogado
12h 34m

Conquistas
12/30

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/game-board.tsx" "use client" import { motion, AnimatePresence } from "framer-motion" import { useEffect, useState } from "react" export const BACKGROUNDS = { default: { board: "bg-gray-800", cell: "bg-gray-900", }, ocean: { board: "bg-blue-900", cell: "bg-blue-950", }, forest: { board: "bg-green-900", cell: "bg-green-950", }, volcano: { board: "bg-red-900", cell: "bg-red-950", }, galaxy: { board: "bg-purple-900", cell: "bg-purple-950", }, } interface GameBoardProps { board: string[][] onBlockClick: (row: number, col: number) => void gameOver?: boolean background?: keyof typeof BACKGROUNDS } interface BlockProps { color: string row: number col: number onClick: () => void disabled: boolean isMatched: boolean isNew: boolean } const Block = ({ color, row, col, onClick, disabled, isMatched, isNew }: BlockProps) => { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {isHovered && !disabled && ( )} ) } export default function GameBoard({ board, onBlockClick, gameOver = false, background = "default" }: GameBoardProps) { const [matchedBlocks, setMatchedBlocks] = useState>(new Set()) const [newBlocks, setNewBlocks] = useState>(new Set()) const theme = BACKGROUNDS[background] // Rastrear blocos novos useEffect(() => { const currentPositions = new Set() board.forEach((row, rowIndex) => { row.forEach((_, colIndex) => { currentPositions.add(`${rowIndex}-${colIndex}`) }) }) // Identificar blocos novos comparando com o estado anterior const newBlockPositions = new Set() currentPositions.forEach((pos) => { if (!matchedBlocks.has(pos)) { newBlockPositions.add(pos) } }) setNewBlocks(newBlockPositions) // Limpar blocos novos após a animação const timer = setTimeout(() => { setNewBlocks(new Set()) }, 500) return () => clearTimeout(timer) }, [board, matchedBlocks]) const handleBlockClick = (row: number, col: number) => { // Adicionar posição ao conjunto de blocos correspondentes setMatchedBlocks(new Set([...matchedBlocks, `${row}-${col}`])) // Limpar matchedBlocks após a animação setTimeout(() => { setMatchedBlocks(new Set()) }, 300) onBlockClick(row, col) } if (!board.length) return null return ( {board.map((row, rowIndex) => row.map((color, colIndex) => { const position = `${rowIndex}-${colIndex}` const isMatched = matchedBlocks.has(position) const isNew = newBlocks.has(position) return ( handleBlockClick(rowIndex, colIndex)} disabled={gameOver} isMatched={isMatched} isNew={isNew} /> ) }), )} ) }

Block Line

Clique nos Blocos

Sistema de Pontuação

Modo Clássico

Contra o Tempo

Modo Desafio

Modo Zen

Planejamento

Combos

Dicas Avançadas

{mode.name}

Conquistas

Estatísticas

Som

Jogabilidade

Melhores Pontuações

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This